﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Users/Roles</title>

  <script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.1.min.js" type="text/javascript"></script>

  <script type="text/javascript" language="javascript">
    $(document).ready(function() {
      $("table.usersroles td").click(function() {
        var sPage = 'EXECUTINGPATH';
        var bAdd = ($(this).html() != '■');
        var sUser = $(this).siblings('th').html();
        var iIndex = $(this).index();
        var sRole = $('table.usersroles thead tr th').get(iIndex).innerText;
        var sUrl = '';

        if (bAdd && confirm('Add user \'' + sUser + '\' to role \'' + sRole + '\'?') == true) {
          sUrl = sPage + '?add=' + sUser + '&to=' + sRole;
        }
        else if (!bAdd && confirm('Remove user \'' + sUser + '\' from role \'' + sRole + '\'?') == true) {
          sUrl = sPage + '?remove=' + sUser + '&from=' + sRole;
        }

        if (sUrl != '') {
          var sOK = $.ajax({ url: sUrl, async: false, cache: false }).responseText;

          if (sOK == 'OK') {
            $(this).html(bAdd ? '■' : '');
          }
        }
      });
    });     
  </script>

  <style type="text/css">
    body
    {
      font-family: Verdana;
    }
    table.usersroles
    {
      border-collapse: collapse;
      border: 2px solid;
    }
    th
    {
      border: 1px solid grey;
    }
    th.user
    {
      font-weight: normal;
      text-align: left;
      width: 150px;
    }
    th.role
    {
      font-weight: normal;
      text-align: center;
      width: 80px;
    }
    td
    {
      border: 1px solid grey;
      cursor: hand;
      text-align: center;
    }
  </style>
</head>
<body>
  <!-- TABLE INSERTED HERE! -->
  
  <p>Click the cells to add a user to a group or remove a user from a group...</p>
</body>
</html>
